{% extends 'layout/manage.html' %}
{% block css %}
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>

{% endblock %}
{% block content %}

    <div class="container-fluid" style="margin-top: 20px">
        <div class="input-group" style="width: 300px">
            <span class="input-group-addon" id="basic-addon1">日期范围</span>
            <input type="text" id="rangPicker" class="form-control">
        </div>

        <div class="row" style="margin-top: 20px;">
            <div class="col-md-8">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-bar-chart" aria-hidden="true"></i> 人员工作进度
                    </div>
                    <div class="panel-body">
                        <div id="projectUser" style="height: 300px;"></div>
                    </div>
                </div>

            </div>
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-pie-chart" aria-hidden="true"></i> 优先级统计
                    </div>
                    <div class="panel-body">
                        <div id="priority" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}


{% block js %}
    <script src="http://cdn.highcharts.com.cn/highcharts/8.1.0/highcharts.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script>
        $(function () {
            initDateRangPicker();
            inithHighcharPie(moment().format('YYYY-MM-DD'), moment().add(1, 'days').format('YYYY-MM-DD'));
            initHighcharColumn(moment().format('YYYY-MM-DD'), moment().add(1, 'days').format('YYYY-MM-DD'));
        })

        // 初始化datarangepicker插件
        function initDateRangPicker() {
            var option = {
                maxDate: moment(),
                alwaysShowCalendars: true,
                showWeekNumbers: true,
                ranges: {
                    '今天': [moment(), moment()],
                    '昨天': [moment().subtract(1, 'day'), moment().subtract(1, 'day')],
                    '最近7天': [moment().subtract(6, 'day'), moment()],
                    '最近30天': [moment().subtract(29, 'day'), moment()],
                    '最近7天': [moment().startOf('month'), moment().endOf('month')],
                },
                locale: {
                    format: 'YYYY-MM-DD',
                    separator: ' 至 ',
                    applylabel: '确定',
                    cancelLabel: '取消',
                    fromLabel: '开始',
                    toLabel: '结束',
                    customRangeLabel: '自定义',
                    weekLabel: 'W',
                    daysOfWeek: ['一', '二', '三', '四', '五', '六', '日'],
                    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                    firstDay: 1
                }
            };
            $('#rangPicker').daterangepicker(option, function (start, end, label) {
                console.log(start.format('YYYY-MM-DD'), end.add(1, 'days').format('YYYY-MM-DD'));
                inithHighcharPie(start.format('YYYY-MM-DD'), end.add(1, 'days').format('YYYY-MM-DD'));
                initHighcharColumn(start.format('YYYY-MM-DD'), end.add(1, 'days').format('YYYY-MM-DD'));
            });
        }

        function inithHighcharPie(start, end) {
            var config = {
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie'
                },
                title: {
                    text: ''
                },
                credits: {
                    enabled: false // 关闭版权信息
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        }
                    }
                },
                series: [{
                    name: 'Brands',
                    colorByPoint: true,
                    data: [{
                        'name': 'Chrome',
                        'y': 60,

                    }, {
                        name: 'Chrome',
                        y: 61.41,

                    }]
                }]
            };
            $.ajax({
                url: '{% url 'statistics_pie' request.obj.0.0 %}',
                type: 'get',
                dataType: 'JSON',
                data:{start: start, end: end},
                success: function (res) {
                    config.series[0].data = res.data;
                    console.log(config.series[0].data);
                    console.log(res);
                    Highcharts.chart('priority', config);
                }
            });


        }

        // 柱状图
        function initHighcharColumn(start, end) {
            var config = {
                chart: {
                    type: 'column'
                },
                title: {
                    text: '堆叠柱形图'
                },
                xAxis: {
                    categories: ['新建', '处理', '解决', '忽略', '反馈', '关闭', '重新打开']
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '水果消费总量'
                    },
                    stackLabels: {  // 堆叠数据标签
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                        }
                    }
                },
                legend: {
                    align: 'right',
                    x: -30,
                    verticalAlign: 'top',
                    y: 25,
                    floating: true,
                    backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                    borderColor: '#CCC',
                    borderWidth: 1,
                    shadow: false
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.x + '</b><br/>' +
                            this.series.name + ': ' + this.y + '<br/>' +
                            '总量: ' + this.point.stackTotal;
                    }
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: true,
                            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                            style: {
                                // 如果不需要数据标签阴影，可以将 textOutline 设置为 'none'
                                textOutline: '1px 1px black'
                            }
                        }
                    }
                },
                series: []
            };
            $.ajax({
                url: '{% url 'statistics_column' request.obj.0.0 %}',
                type:'get',
                dataType: 'JSON',
                data:{start: start, end: end},
                success: function (res) {
                    config.series = res.data;
                    Highcharts.chart('projectUser', config);
                }
            })

        }

    </script>
{% endblock %}